<template>
    <div>
        <div class="order_detail">
            <van-panel :title="order.consignee + ' ' + order.mobile" :status="order.statusName">
                <div class="address_detail">
                    {{ order.consigneeAddress }}
                    <br />
                </div>
                <div class="footer_btn">
                    <!--          <van-button size="small" type="default" @click="contact">联系客服</van-button>@click="payment"-->
                    <van-button size="small" type="danger" @click="payment" v-if="order.statusName == '待付款'">立即付款</van-button>

                    <van-button size="small" type="danger" @click="confirm" v-if="order.statusName == '已发货'">确认收货</van-button>
                </div>
            </van-panel>
            <van-panel :title="'订单编号: ' + order.orderSn">
                <van-card v-for="(orderItem, index) in order.items" :key="index" :title="orderItem.goods.name" :desc="orderItem.goods.descript" :price="orderItem.price" :num="orderItem.count" @click="toGoods(orderItem.goods.id)" :thumb="orderItem.goods.imgUrl">
                </van-card>
                <div class="total">
                    <van-button v-if="order.statusName == '待发货'" size="small" @click="applyRefund(order.orderSn)">申请退款</van-button>
                    合计:<span class="red"> ￥{{ order.realPrice }}</span>
                </div>
            </van-panel>
            <van-panel title="订单信息">
                <van-cell-group>
                    <van-cell title="订单编号" :value="order.orderSn" />
                    <van-cell title="创建时间" :value="order.createTime" />
                    <van-cell title="快递公司" :value="order.express.name" v-if="order.express" />
                    <van-cell title="快递单号" :value="order.shippingSn" v-if="order.express" />
                    <van-cell title="备注" :value="order.message" />
                </van-cell-group>
            </van-panel>
            <br /><br /><br />
        </div>
    </div>
</template>

<script>
// Use Vuex
import store from "@/utils/store";
import utils from "@/utils/index";

export default {
    computed: {
        count() {
            return store.state.count;
        }
    },
    config: {
        navigationBarTitleText: "订单"
    },
    data() {
        return {
            order: {},
            loading: false,
            finished: false
        };
    },
    onLoad(options) {
        const orderSn = options.orderSn;
        this.getOrderData(orderSn);
        wx.setNavigationBarTitle({
            title: "订单详情"
        });
    },
    methods: {
        getOrderData(orderSn) {
            let url = "user/order/" + orderSn;
            this.$API.get(url).then(res => {
                let order = res.data;
                order.realPrice = utils.formatPrice(order.realPrice);
                for (let j = 0; j < order.items.length; j++) {
                    order.items[j].price = utils.formatPrice(
                        order.items[j].price
                    );
                    let goods = order.items[j].goods;
                    goods.imgUrl = utils.fileMgrUrl + goods.pic;
                }

                this.order = order;
            });
        },
        applyRefund(orderSn) {
            let that = this;
            wx.showModal({
                title: "提示",
                content: "确定要申请退款吗？",
                success: function(sm) {
                    if (sm.confirm) {
                        // 用户点击了确定
                        let url = "user/order/refund/" + orderSn;
                        that.$API.post(url).then(res => {
                            console.log(res);
                            that.getOrderData(orderSn);
                            wx.setNavigationBarTitle({
                                title: "订单详情"
                            });
                        });
                    } else if (sm.cancel) {
                        console.log("用户点击取消");
                    }
                }
            });
        },
        payment() {
            let order = this.order;
            const url =
                "../payment/index?orderSn=" +
                order.orderSn +
                " &realPrice=" +
                order.realPrice;
            wx.navigateTo({ url });
        },
        toGoods(id) {
            let url = "/pages/goods/index?id=" + id;
            wx.navigateTo({ url });
        },
        confirm() {
            let orderSn = this.order.orderSn;
            let url = "user/order/confirm/" + orderSn;
            this.$API.post(url).then(res => {
                wx.showToast({ title: "成功收货", icon: "none" });
                this.getOrderData(orderSn);
            });
        }
    }
};
</script>

<style>
.total {
    text-align: right;
    padding: 10px;
}
.red {
    color: #f44;
}
.address_detail {
    padding-left: 16px;
}
.footer_btn {
    text-align: right;
}
.van-button {
    margin-right: 10px;
}
</style>
